<!-- 营销 -->
 <template>
  <div class="marketing-box">
    <div class="white1">
      <p class="xp">热门推荐</p>
      <div style="display: flex; justify-content: space-evenly">
        <div
          class="item1"
          style="background: linear-gradient(to bottom, #b3ead2, #4dce96)"
        >
          <p style="font-size: 1rem; font-weight: bold">宣传自制</p>
          <p style="font-size: 0.7rem">引人注目的设计和内容、有效的分发策略</p>
          <div style="display: flex; align-items: center">
            <button
              class="createbtn"
              style="color: #4dce96"
              @click="changeFlag"
            >
              立即创建
            </button>
            <img
              src="/la.png"
              alt=""
              style="width: 2rem; border-radius: 50%; margin-left: 10rem"
            />
          </div>
        </div>
        <div
          class="item2"
          style="background: linear-gradient(to bottom, #7587fa, #7d8cf4)"
        >
          <p style="font-size: 1rem; font-weight: bold">抖音推广</p>
          <p style="font-size: 0.7rem">抢占抖音亿级流量，搭建门店经营新阵地</p>
          <div style="display: flex; align-items: center">
            <button class="createbtn" style="color: #7587fa">立即创建</button>
            <img
              src="/music.png"
              alt=""
              style="width: 2rem; border-radius: 50%; margin-left: 10rem"
            />
          </div>
        </div>
        <div
          class="item3"
          style="background: linear-gradient(to bottom, #f7dca1, #fbc760)"
        >
          <p style="font-size: 1rem; font-weight: bold">会员储值</p>
          <p style="font-size: 0.7rem">储值赠送引导会员充值，提升复购里</p>
          <div style="display: flex; align-items: center">
            <button class="createbtn" style="color: #fac483">立即创建</button>
            <img
              src="/price.png"
              alt=""
              style="width: 2rem; border-radius: 50%; margin-left: 10rem"
            />
          </div>
        </div>
        <div
          class="item4"
          style="background: linear-gradient(to bottom, #f995fc, #d873fe)"
        >
          <p style="font-size: 1rem; font-weight: bold">多人拼团</p>
          <p style="font-size: 0.7rem">发起拼团,轻松裂变</p>
          <div style="display: flex; align-items: center">
            <button class="createbtn" style="color: #d873fe">立即创建</button>
            <img
              src="/pin.png"
              alt=""
              style="width: 2rem; border-radius: 50%; margin-left: 10rem"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="white2">
      <p class="xp">拉新拓客</p>
      <div
        style="
          display: flex;
          flex-wrap: wrap;
          padding: 2rem;
          box-sizing: border-box;
        "
      >
        <div
          style="
            width: 380px;
            height: 100px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            margin-right: 1rem;
          "
          v-for="i in list"
          :key="i.id"
        >
          <div class="image">
            <img
              :src="i.img"
              style="width: 3rem; height: 3rem; border-radius: 0.7rem"
            />
          </div>
          <div style="width: 80%; margin-left: 0.5rem">
            <p>{{ i.title }}</p>
            <p style="font-size: 0.8rem">{{ i.text }}</p>
          </div>
        </div>
      </div>
      <p class="xp">客户运营</p>
      <div
        style="
          display: flex;
          flex-wrap: wrap;
          padding: 2rem;
          box-sizing: border-box;
        "
      >
        <div
          style="
            width: 380px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 2rem;
            margin-right: 1rem;
          "
          v-for="i in list1"
          :key="i.id"
        >
          <div class="image">
            <img
              :src="i.img"
              style="width: 3rem; height: 3rem; border-radius: 0.7rem"
            />
          </div>
          <div style="width: 80%; margin-left: 0.5rem">
            <p>{{ i.title }}</p>
            <p style="font-size: 0.8rem">{{ i.text }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="animate__animated animate__fadeInDown mask-layer" v-if="flag">
      <div class="white">
        <div class="white-top">
          <el-icon style="color: #fac483"><Tools /></el-icon>
          <p>
            <span>Background Color </span>
            <el-color-picker
              v-model="color"
              show-alpha
              :predefine="predefineColors"
              size="small"
              @change="changeColor"
            />
          </p>
          <div>
            <input type="text" placeholder="##标题 1" class="upinput">
          </div>
          <p>可用素材</p>
          <Vue3DraggableResizable
          :draggable="true"
          :resizable="true"
          :w="145"
          :h="200"
          :x="200"
          :y="230"
          @dragging="onDrag"
          @resizing="onResize"
          >
            <img src="/banner1.png" alt="" class="bannerimg" />
       
          </Vue3DraggableResizable>

          <Vue3DraggableResizable
          :draggable="true"
          :resizable="true"
          :w="200"
          :h="200"
          :x="10"
          :y="280"
          @dragging="onDrag"
          @resizing="onResize1"
          >
          <img src="/shuzi.jpg" alt="" style="width: 150px; height: 140px" class="tupian"/>
       
          </Vue3DraggableResizable>
          
         
        </div>
        <div class="white-dashed">
       
        </div>
      </div>
    </div> -->
  </div>
</template>
 
 <script setup>
import { Tools } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import "animate.css";
import { ElColorPicker } from "element-plus";

const flag = ref(false);
const ww=ref(0)
const hh=ref(0)

const changeFlag = () => {
  flag.value = true;
};

const closeMasK = () => {
  flag.value = false;
};
const list = reactive([
  {
    id: 1,
    title: "全民推广",
    text: "裂变必备利器，通过推广奖励激励全民帮您推广，轻松拓客",
    img: "/img1.png",
  },
  {
    id: 2,
    title: "多渠道推广",
    text: "监控您的员工，传单，店内海报，易拉宝等渠道的推广效果",
    img: "/img2.png",
  },
  {
    id: 3,
    title: "员工分销",
    text: "让员工作为分销员帮店铺推广拓客,轻松拓客",
    img: "/img3.png",
  },
  {
    id: 4,
    title: "短视频营销",
    text: "短视频互动引爆流量，结合集赞点赞玩法轻松打造社交圈裂变爆款",
    img: "/img4.png",
  },
  {
    id: 5,
    title: "体验价",
    text: "设置初次体验优惠价，吸引新客下单消费",
    img: "/img5.png",
  },
  {
    id: 6,
    title: "多平台推广连接",
    text: "在抖音、快手、短信等外部平台推广，点击后跳转到微信小程序引流获客",
    img: "/img6.png",
  },
]);

const list1 = reactive([
  {
    id: 1,
    title: "客户画像",
    text: "根据客户消费行为，消费金额，消费频次等数据，分析客户画像",
    img: "/img7.png",
  },
  {
    id: 2,
    title: "客户标签",
    text: "根据客户消费行为，消费金额，消费频次等数据，分析客户画像",
    img: "/img8.png",
  },
  {
    id: 3,
    title: "客户等级",
    text: "根据客户消费行为，消费金额，消费频次等数据，分析客户画像",
    img: "/img9.png",
  },
]);

const color = ref("");
const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577",
]);

const changeColor = (val) => {
  color.value = val;
  if (val) {
    document.querySelector(".white-dashed").style.background = color.value;
  }
};

const onResize =(size)=>{
  let {w,h}=size
  ww.value=w
  hh.value=h
  let img=document.querySelector(".bannerimg")
  img.style.width=w+'px'
  img.style.height=h+'px'

}
const onResize1 =(size)=>{
  let {w,h}=size
  let img=document.querySelector(".tupian")
  img.style.width=w+'px'
  img.style.height=h+'px'

}
const onDrag =(x,y)=>{

}
</script>
 
 <style scoped>
 .bannerimg{
  width:145px;
  height:200px;
 }
 .upinput{
  border:none;
  padding:0.2rem 0.5rem;
  box-sizing: border-box;
  font-size: 2rem;
 }
 .upinput:focus{
  outline: none;
 }
.demo-color-sizes .el-color-picker:not(:last-child) {
  margin-right: 16px;
}
.mask-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.white {
  width: 80rem;
  height: 50rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: white;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
}
.white-top {
  width: 50%;
}
.white-dashed {
  width: 50%;
  height: 100%;
  border: 2px dashed #fac483;
  border-radius: 0.2rem;
}
.image {
  width: 17%;
}
.xp {
  font-size: 1rem;
  font-weight: 500;
  border-left: 5px solid #4781ff;
  padding-left: 1rem;
  box-sizing: border-box;
}
.createbtn {
  padding: 0.2rem 1rem;
  font-size: 0.6rem;
  border: none;
  border-radius: 50px;
  background: white;
}
.item1,
.item2,
.item3,
.item4 {
  width: 20%;
  height: 8rem;
  margin-top: 1rem;
  border-radius: 0.7rem;
  padding-left: 1.5rem;
  box-sizing: border-box;
  color: white;
}
.marketing-box {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  margin: 0;
  padding: 0;
}
.white1 {
  width: 100%;
  height: 15rem;
  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-sizing: border-box;
}
.white2 {
  width: 100%;
  height: auto;
  background: white;
  border-radius: 0.5rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  box-sizing: border-box;
}
</style>